<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import { debounce } from '@/utils'

  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Array,
        default() {
          return []
        },
        required: true
      }
    },
    data() {
      return {
        chart: null,
        // 预设的颜色
        predefineColors: [
          '#19C5F4',
          '#ffd700',
          '#18bc9c',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#ff5c1d',
          '#ff1651',
          '#ff65f3',
          '#1e90ff'
        ]
      }
    },
    watch: {
      chartData(val) {
        // this.setOptions(val);
        this.initChart();
        this.chart.resize();
      }
    },
    mounted() {
      if (this.autoResize) {
        this.__resizeHandler = debounce(() => {
          if (this.chart) {
            this.chart.resize();
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler);
      }

      // 监听侧边栏的变化
      const sidebarElm = document.getElementsByClassName('sidebar-container')[0];
      sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler);
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHandler);
      }

      const sidebarElm = document.getElementsByClassName('sidebar-container')[0];
      sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler);

      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      sidebarResizeHandler(e) {
        if (e.propertyName === 'width') {
          this.__resizeHandler();
        }
      },
      // 获取随机色
      getRandomColor(){
        const tag = '0123456789abcdef';
        let color = '#';
        for (let i = 0; i < 6; i++) {
          color = color + tag[parseInt(Math.random() * 16)]
        }
        return color;
      },

      setOptions(lineData = []) {
        const legend = { data: [] };
        const series = [];
        for (let i = 0; i < lineData.length; i++) {
          // const color = this.predefineColors[parseInt(Math.random() * 9)];
          const color = this.predefineColors[i];
          // const color = this.getRandomColor();
          legend['data'].push(lineData[i]['label']);
          series.push({
            name: lineData[i]['label'],
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: color,
                lineStyle: {
                  color: color,
                  width: 2
                },
                areaStyle: {
                  color: color + '33'
                }
              }
            },
            data: lineData[i]['dataList'],
            animationDuration: 2800,
            // animationEasing: i === 0 ? 'cubicInOut' : 'quadraticOut'
            animationEasing: 'quadraticOut'
          })
        }

        this.chart.setOption({
          xAxis: {
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            boundaryGap: false,
            axisTick: {
              show: false
            }
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 30,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          yAxis: {
            axisTick: {
              show: false
            }
          },
          legend: legend,
          series: series
        });
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');
        this.setOptions(this.chartData);
      }
    }
  }
</script>
